<template>
  <div class="line-container">
    <v-chart class="chart" :option="option" autoresize />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { LineChart } from "echarts/charts";
import VChart from "vue-echarts";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
} from "echarts/components";

// 注册必要的组件
use([
  CanvasRenderer,
  LineChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
]);

defineOptions({
  name: "Line",
});

// 折线图配置
const option = ref({
  title: {
    textStyle: {
      color: "#fff",
      fontSize: 16,
    },
    left: 0,
    top: 0,
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "10%",
    top: "20%",
    containLabel: true,
  },
  tooltip: {
    trigger: "axis",
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    axisLabel: {
      color: "#fff",
      rotate: 45,
    },
    axisLine: {
      lineStyle: {
        color: "#fff",
      },
    },
    data: [
      "20:02:00",
      "20:04:00",
      "20:06:00",
      "20:08:00",
      "20:10:00",
      "20:12:00",
      "20:14:00",
      "20:16:00",
      "20:18:00",
      "20:20:00",
      "20:22:00",
      "20:24:00",
      "20:26:00",
    ],
  },
  yAxis: {
    type: "value",
    min: 4830,
    max: 4980,
    axisLabel: {
      color: "#fff",
    },
    axisLine: {
      lineStyle: {
        color: "#fff",
      },
    },
    splitLine: {
      lineStyle: {
        color: "rgba(255, 255, 255, 0.1)",
      },
    },
  },
  series: [
    {
      type: "line",
      smooth: true,
      symbol: "none",
      lineStyle: {
        width: 2,
        color: "#3399ff",
      },
      areaStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(51, 153, 255, 0.2)",
            },
            {
              offset: 1,
              color: "rgba(51, 153, 255, 0)",
            },
          ],
        },
      },
      data: [
        4980, 4965, 4950, 4935, 4920, 4905, 4890, 4875, 4860, 4845, 4835, 4830,
        4833.933,
      ],
    },
  ],
});
</script>

<style scoped lang="scss">
.line-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chart {
  width: 100%;
  height: 100%;
}
</style>
